<template>
  <div>
    <div id="chart" :style="{ width: '100%', height: '300px'}"></div>
    <div class="container">
      <div class="van-hairline--bottom">
        <van-row>
          <van-col span="16">2021年10月30日记录</van-col>
          <van-col span="8" style="text-align:right">
            <van-button type="primary" size="small">查看用药详情</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Workbench',
  data() {
    return {
      star: 2.5,
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEcharts()
    })
  },
  components: {},
  methods: {
    initEcharts() {
      // let myChart = echarts.init(this.$refs.lineChart)
      let myChart = echarts.init(document.querySelector('#chart'))
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }
      myChart.setOption(option)
    }
  }

}
</script>

<style scoped>
.container {
  width: 96%;
  margin: 0 auto;
}

.advise {
  margin-top: 20px;
}

.content {
  background: #f3f3f3;
  color: #999;
  padding: 4px;
}
</style>
